<template>
	<u-cell-group :border="false">
		<u-cell-item :title-width="width" :arrow="Arrow" @click="onClick" :required="required" :title="label" :value="ValueText" :title-style="cellItemTitleStyle" :value-style="CellItemValueStyle" :hover-class="HoverClass">
			<template #right-icon>
				<slot name="right"></slot>
			</template>
		</u-cell-item>
		<template v-if="RenderPicker">
			<u-picker mode="time" :start-year="StartYear" :params="PickerParams" v-model="showPicker" @confirm="onConfirmPicker" @cancel="onCancelPicker"></u-picker>

		</template>

		<template v-if="RenderUserSelectPopUp">
			<UserSelectPopUp ref="UserSelectPopUp" :value="value" @value="onSelectPopUpValue"></UserSelectPopUp>
		</template>
		<template v-if="RenderAssetsSelectPopUp">
			<AssetsSelectPopUp ref="AssetsSelectPopUp" :value="value" @value="onSelectPopUpValue"></AssetsSelectPopUp>
		</template>
		<template v-if="RenderDepartmentSelectPopUp">
			<DepartmentSelectPopup ref="DepartmentSelectPopup" :value="value" @value="onSelectPopUpValue"></DepartmentSelectPopup>
		</template>
		<template v-if="RenderFactorySelectPopUp">
			<FactorySelectPopup ref="FactorySelectPopup" :value="value" @value="onSelectPopUpValue"></FactorySelectPopup>
		</template>
		<template v-if="RenderInspectionUnitPopup">
			<InspectionUnitPopup ref="InspectionUnitPopup" :value="value" @value="onSelectPopUpValue"></InspectionUnitPopup>
		</template>

	</u-cell-group>
</template>

<script>
	import { dicList } from '@/filter/index.js'
	import UserSelectPopUp from '@/components/select/userSelectPopup.vue'
	import AssetsSelectPopUp from '@/components/select/assetsSelectPopup.vue'
	import DepartmentSelectPopup from '@/components/select/departmentSelectPopup.vue'
	import FactorySelectPopup from '@/components/select/factorySelectPopup.vue'
	import InspectionUnitPopup from '@/components/select/InspectionUnitPopup.vue'

	export default {

		components: {
			UserSelectPopUp,
			AssetsSelectPopUp,
			DepartmentSelectPopup,
			FactorySelectPopup,
			InspectionUnitPopup
		},
		props: {
			disabled: Boolean,
			required: {
				type: Boolean,
				default: false
			},
			active: {
				type: Boolean,
				default: true
			},
			arrow: {
				type: Boolean,
				default: true
			},
			width: {
				type: [String, Number],
				default: '200'
			},
			dicKey: {
				type: String,
				default: ''
			},
			// //控制过滤出的值显示
			dicIncludesValue: {
				type: Array,
				default: () => {
					return []
				}
			},
			//查看模式
			viewModel: Boolean,
			label: {
				type: String,
				default: 'label'
			},
			value: {
				type: String,
				default: '请选择'
			},
			/**
			 * dic
			 * date-picker
			 * date-picker-ymd
			 * date-picker-ymd-before
			 * select-user
			 * select-asset 
			 * select-department
			 * select-factory
			 * select-inspectionUnit  //巡检单元
			 */
			itemClickType: {
				type: String,
				default: 'dic'
			},
			customActionSheetList: {
				type: Array,
				default: () => {
					// [{name:'是',val:1},{name:'否',val:0}]
					return []
				}
			},
		},
		computed: {
			RenderPicker() {
				return ['date-picker', 'date-picker-ymd', 'date-picker-ymd-before'].includes(this.itemClickType)
			},
			RenderUserSelectPopUp() {
				return ['select-user'].includes(this.itemClickType)
			},
			RenderAssetsSelectPopUp() {
				return ['select-asset'].includes(this.itemClickType)
			},
			RenderDepartmentSelectPopUp() {
				return ['select-department'].includes(this.itemClickType)
			},
			RenderFactorySelectPopUp() {
				return ['select-factory'].includes(this.itemClickType)
			},
			RenderInspectionUnitPopup() {
				return ['select-inspectionUnit'].includes(this.itemClickType)
			},

			PickerParams() {
				if (this.itemClickType === 'date-picker-ymd') {
					return {
						year: true,
						month: true,
						day: true,
						hour: false,
						minute: false,
						second: false
					}
				}
				return {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: false
				}

			},

			HoverClass() {
				if (this.$slots?.right) {
					return 'none'
				}
				return 'u-cell-hover'
			},
			ValueText() {
				if (this.$slots?.right) {
					return ''
				}
				return this.valueText || "请选择"
			},
			Arrow() {
				if (this.viewModel || this.disabled || this.$slots?.right) {
					return false
				}
				return this.arrow
			},
			CellItemValueStyle() {
				if (this.viewModel || this.disabled) {
					return {
						'fontWeight': 400,
						'fontSize': '28rpx',
						'color': '#0F2E4D'
					}
				}
				return {
					'fontWeight': 400,
					'fontSize': '28rpx',
					'color': this.active ? '#409EFF' : '#98A5B3'
				}
			},
			StartYear() {
				if (this.itemClickType === 'date-picker-ymd-before') {
					return 1950
				}
				return new Date().getFullYear()
			}
		},
		data() {
			return {
				valueText: '',
				showPicker: false,
				cellItemTitleStyle: {
					'fontWeight': 400,
					'fontSize': '28rpx',
					'color': '#98A5B3'
				},


			}
		},

		mounted() {
			this.init()
		},

		watch: {
			value: function(val) {
				if (val) {
					this.resetInit()
				} else {
					this.valueText = ''
					this.$emit('input', '')
				}
			}
		},
		methods: {

			resetInit(text) {
				this.init()
				if (text) {
					this.valueText = text
				}
			},
			onSelectPopUpValue(obj) {
				this.valueText = obj.name
				this.$emit('input', obj.value)
				this.$emit('other', obj?.other || {})
			},
			onConfirmPicker(data) {
				let {
					year,
					month,
					day,
					hour,
					minute
				} = data
				this.valueText = `${year|| ''}-${month|| ''}-${day|| ''} ${hour? hour+':' :''  }${minute||""}`
				this.$emit('input', this.valueText.trim())
			},

			onCancelPicker(data) {},

			init() {
				if (this.customActionSheetList.length && this.value != null && this.value != '') {
					const self = this
					let findResult = this.customActionSheetList.find((item) => item.value == this.value);

					self.valueText = findResult?.name || ''
					self.$emit('input', findResult.value)
					return
				}
				if (this.itemClickType === 'dic') {
					this.setValue(this.value, this.dicKey)
				}
				if (this.itemClickType === 'select-asset') {
					this.setValue(this.value, 'assetsType', 'id')
				}
			},
			setValue(value, dicKey, key = "value") {
				if (value != null && value != '' && dicKey) {
					let dicValueList = dicList(dicKey)
					let findDicValue = dicValueList.find((item) => {
						if (item.value == value || item.id == value) {
							return item
						}
					})
					this.valueText = findDicValue?.name || ''
					this.$emit('input', findDicValue[key] || '')
				}
			},
			onClick() {
				if (this.viewModel || this.disabled) {
					return
				}
				if (this.customActionSheetList.length) {
					const self = this
					let itemList = this.customActionSheetList.map((e) => e.name);
					let itemValue = this.customActionSheetList.map((e) => e.value)
					wx.showActionSheet({
						itemList: itemList,
						success({
							tapIndex
						}) {

							self.valueText = itemList[tapIndex]
							self.$emit('input', itemValue[tapIndex])
						},
					})
					return
				}

				if (this.itemClickType === 'dic') {
					if (this.dicKey) {
						let dicValueList = dicList(this.dicKey)
						if (this.dicIncludesValue.length) {
							dicValueList = dicValueList.filter((item) => this.dicIncludesValue.includes(item.value))
						}
						let itemList = dicValueList.map((e) => e.name);
						let itemValue = dicValueList.map((e) => e.value)
						const self = this
						wx.showActionSheet({
							itemList: itemList,
							success({
								tapIndex
							}) {

								self.valueText = itemList[tapIndex]
								self.$emit('input', itemValue[tapIndex])
							},
						})

					}
				} else if (this.RenderPicker) {
					this.showPicker = true
				} else if (this.RenderUserSelectPopUp) {
					this.$refs.UserSelectPopUp.openPopUp()
				} else if (this.RenderAssetsSelectPopUp) {
					this.$refs.AssetsSelectPopUp.openPopUp()
				} else if (this.RenderDepartmentSelectPopUp) {
					this.$refs.DepartmentSelectPopup.openPopUp()
				} else if (this.RenderFactorySelectPopUp) {
					this.$refs.FactorySelectPopup.openPopUp()
				} else if (this.RenderInspectionUnitPopup) {
					this.$refs.InspectionUnitPopup.openPopUp()
				}
			}
		},

	}
</script>

<style>
</style>
